<template>
    <div class="forum-container">
        <!-- 搜索框 -->
        <div class="search-bar">
            <input type="text" v-model="param.title" placeholder="搜索帖子..." class="search-input" />
            <button @click="loadPosts" class="search-button">搜索</button>
        </div>

        <!-- 发帖按钮 -->
        <div class="post-button-container">
            <el-button type="primary" @click="openPostDialog" class="post-button">管理员发帖</el-button>
        </div>

        <!-- 帖子列表 -->
        <div class="post-list">
            <div class="post" v-for="post in posts" :key="post.id">
                <div class="post-header">
                    <h3 class="post-title">{{ post.title }}</h3>
                    <span class="post-date">{{ formatDate(post.date) }}</span>
                </div>

                <p class="post-summary"> 摘要：{{ post.summary }}</p>
                <span class="post-author">发布人: {{ post.author }}</span>
                <div class="post-actions">
                    <button @click="viewPost(post.id)" class="view-button">查看详情</button>
                    <button @click="deletePost(post.id)" class="delete-button">删除</button>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background :page-sizes="[5, 10, 20, 50]" :page-size="pageSize" :current-page="pageNum"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @prev-click="prePage"
                    @next-click="nextPage" @current-change="curPage" @size-change="sizeChange">
                </el-pagination>
            </el-col>
        </el-row>

        <!-- 查看帖子详情弹窗 -->
        <el-dialog title="帖子详情" :visible.sync="showDialog" width="60%">
            <div v-if="postDetails">
                <el-row>
                    <el-col :span="24">
                        <h3>{{ postDetails.title }}</h3>
                        <p>{{ postDetails.neirong }}</p>
                        <p><strong>发布人:</strong> {{ postDetails.author }}</p>
                        <p><strong>创建时间:</strong> {{ formatDate(postDetails.date) }}</p>
                    </el-col>
                </el-row>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">关闭</el-button>
            </div>
        </el-dialog>

        <!-- 发帖弹窗 -->
        <el-dialog title="发帖" :visible.sync="showPostDialog" width="50%">
            <el-form :model="newPost" label-width="80px">
                <el-form-item label="标题">
                    <el-input v-model="newPost.title" placeholder="请输入标题" />
                </el-form-item>
                <el-form-item label="摘要">
                    <el-input v-model="newPost.summary" placeholder="请输入摘要" />
                </el-form-item>
                <el-form-item label="内容">
                    <el-input type="textarea" v-model="newPost.neirong" placeholder="请输入帖子内容" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showPostDialog = false">取消</el-button>
                <el-button type="primary" @click="submitPost">发布</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageSize: 20,
            pageNum: 1,
            total: 0,

            posts: [],
            param: {},
            showDialog: false,
            postDetails: null,

            showPostDialog: false,
            newPost: {
                title: '',
                summary: '',
                neirong: ''
            }
        };
    },
    methods: {
        viewPost(postId) {
            this.showDialog = true;
            this.$axios.get('api/posts/viewPost/' + postId)
                .then(response => {
                    if (response.data.code == 200) {
                        this.postDetails = response.data.data;
                    }
                })
                .catch(error => {
                    console.error("获取帖子详情失败", error);
                });
        },

        loadPosts() {
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.param;
            this.$axios.post('api/posts/queryPostsPower', pageParam)
                .then(resp => {
                    if (resp.data.code == 200) {
                        this.posts = resp.data.data.list;
                        this.total = resp.data.data.total;
                    }
                })
        },

        formatDate(date) {
            const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
            return new Date(date).toLocaleDateString('zh-CN', options);
        },

        openPostDialog() {
            this.showPostDialog = true;
        },

        submitPost() {
            this.$axios.post('api/posts/addPosts', this.newPost)
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message.success('发帖成功');
                        this.loadPosts();
                        this.showPostDialog = false;
                    } else {
                        this.$message.error('发帖失败');
                    }
                })
                .catch(error => {
                    console.error("发帖失败", error);
                    this.$message.error('发帖失败');
                });
        },

        deletePost(postId) {
            let posts = { id: postId }
            this.$axios.post('api/posts/del', posts)
                .then(response => {
                    if (response.data.code == 200) {
                        this.$message.success('删除成功')
                        this.loadPosts();
                    }
                })
        },
        // -------------------------------------------------------
        prePage() {
            if (this.pageNum > 1) {
                this.pageNum--;
                this.loadPosts();
            }
        },

        nextPage() {
            if (this.pageNum < Math.ceil(this.total / this.pageSize)) {
                this.pageNum++;
                this.loadPosts();
            }
        },

        curPage(pageNum) {
            this.pageNum = pageNum;
            this.loadPosts();
        },

        sizeChange(pageSize) {
            this.pageSize = pageSize;
            this.pageNum = 1;
            this.loadPosts();
        },
    },

    created() {
        this.loadPosts();
    },
};
</script>

<style scoped>
.forum-container {
    padding: 20px;
    background-color: #596169;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 10px 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-input {
    width: 80%;
    padding: 8px;
    border: 1px solid #596169;
    border-radius: 4px;
    font-size: 16px;
}

.search-button {
    width: 5%;
    background-color: #596169;
    color: white;
    border: none;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background-color: #66b1ff;
}

.post-button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.post-button {
    font-size: 16px;
    background-color: #67C23A;
    border: none;
    padding: 10px 20px;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

.post-button:hover {
    background-color: #84d084;
}

.post-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.post {
    background-color: #94999b;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease;
}

.post:hover {
    transform: translateY(-10px);
}

.post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.post-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.post-date {
    color: #999;
    font-size: 14px;
}

.post-summary {
    color: #555;
    margin-bottom: 10px;
}

.post-author {
    font-size: 14px;
    color: #666;
}

.view-button {
    margin-left: 140px;
    background-color: #409EFF;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-button:hover {
    background-color: #66b1ff;
}

.el-pagination {
    text-align: center;
    margin-top: 20px;
}

.el-dialog {
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dialog-footer .el-button {
    margin: 0 5px;
}

.el-button--primary {
    background-color: #409EFF;
    border-color: #409EFF;
}

.el-button--primary:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
}

.post-actions {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 10px;
}

.delete-button {
    background-color: #f56c6c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.delete-button:hover {
    background-color: #ff7b7b;
}
</style>
